<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>questionnaire</title>
    <link rel="stylesheet" href="questionnaire.css">
    <link href="img/bear.png" rel="icon">
    <script type="text/javascript" src="questionnaire.js"></script>
</head>

<body>
    <form name="个人信息" method="GET" action="#" align="center" id="content">
        <!-- 说明部分 -->
        <div class="section" id="intro">
            <div>
                <img src="img/bear.png">
                <img src="img/bear.png">
                <img src="img/bear.png">
            </div>
            <h3>欢迎访问我的博客！</h3>
            <h3>希望能在博客里和大家分享一些更有趣的内容，也邀请您填写一下这份小问卷~</h3>
            <h3>祝您拥有愉快的访问体验^3^</h3>

        </div>

        <!-- 了解渠道 -->
        <div class="main">
            <div class="section">
                <h4>请问您通过什么渠道了解到我的博客呢？</h4>
                <select name="way" id="id_way">
                    <option value="搜索">搜索</option>
                    <option value="博主分享">博主分享</option>
                    <option value="朋友分享">朋友分享</option>
                    <option value="其他">其他</option>
                </select>
            </div>

            <!-- 模块选择 -->
            <div class="section">
                <h4>请问您对我哪一板块的内容比较感兴趣呢？</h4>
                <input type="radio" name="section" id="section1">
                <button>摄影分享</button>
                <br><br>
                <input type="radio" name="section" id="section2">
                <button>个人随笔</button>
                <br><br>
                <input type="radio" name="section" id="section3">
                <button>网站链接</button>
            </div>

            <!-- 建议 -->
            <div class="section">
                <h4>欢迎对我的分享提出其他建议~</h4>
                <textarea cols="40" rows="10" placeholder=" write anything..."></textarea>
            </div>

            <!-- 联系方式 -->
            <div class="section">
                <h4>留下你的联系方式吧！</h4>
                <!-- tel-->
                <div class="textfield">
                    <input type="text" placeholder="&nbsp;&nbsp;&nbsp;tel" maxlength="11" required/>
                </div>

                <!-- 邮箱 -->
                <div>
                    <input typr="text" placeholder="&nbsp;&nbsp;&nbsp;e_mail" maxlength="30" oninput="validate_email(this)"/>
                </div>

            </div>

            <!-- 提交 -->
            <div>
                <input type="submit" onclick="success()">
            </div>
        </div>


        <!-- 注脚 -->
        <div id="footer">
            <div id="menu_home">
                <img src="img/menu_home.png" width=20px height=20px>
            </div>
            <footer>https://kkprograming.gitee.io/html</footer>
        </div>

    </form>

</body>

</html>